<template>
  <div class="title-container flex justify-between items-center p-20px">
    <div class="left-section flex flex-col text-white">
      <h1 class="main-title m-0 text-3xl font-bold">{{ dataInfo.title }}</h1>
      <p class="sub-title m-0 text-xl text-gray-300">{{ dataInfo.subTitle }}</p>
    </div>
    <div class="right-section flex items-center gap-5 text-white">
      <span class="current-time text-3xl text-white">{{ formattedTime }}</span>
      <button class="fullscreen-btn bg-transparent border-none cursor-pointer p-0" @click="toggleFullscreen">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-6 h-6 stroke-current stroke-2 stroke-linecap-round stroke-linejoin-round"
          width="28"
          height="28"
          viewBox="0 0 24 24"
          fill="none">
          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getTitle } from '@/api/index'
import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

const formattedTime = ref('')
let intervalId
const dataInfo = ref({
  title: '无锡惠山城市安全教育体验馆',
  subTitle: 'Product pre-sale business data display'
})



function fetchData() {
  console.log('执行组件数据刷新:获取系统标题')
  getTitle().then(res => {
    dataInfo.value = res.data
  })
}

// 补零函数
const padZero = (num) => num.toString().padStart(2, '0')

const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = padZero(now.getMonth() + 1) // 月份从 0 开始，需加 1
  const day = padZero(now.getDate())
  const hours = padZero(now.getHours())
  const minutes = padZero(now.getMinutes())
  const seconds = padZero(now.getSeconds())
  // 格式化时间为 YYYY-MM-DD HH:MM:SS 格式
  formattedTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

onMounted(() => {
  updateTime()
  intervalId = setInterval(updateTime, 1000)
  
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>
